{% extends "showinfo/base.html" %}


{% block content %}
    <script src="http://cdn.bootcss.com/masonry/2.1.08/jquery.masonry.min.js"></script>



    <div class="form-group">
        <label class="col-lg-3 control-label">搜索音乐关键字</label>

        <div class="col-lg-4">
            <input type="text" class="form-control" name="musicname" id="musicname" placeholder="音乐关键字"/>
        </div>
        <div class="col-lg-4">
            <input type="button" class="btn btn-primary" value="查看" onclick="getdata()"></button>
        </div>
    </div>
    <br/><br/><br/>


    <div class="container-fluid" id="musiclist">


    </div>








    <script>

        $(function () {
            $('#container').masonry({
                // options
                itemSelector: '.item',
                columnWidth: 240
            });

            document.addEventListener('play', function (e) {
                var audios = document.getElementsByTagName('audio');
                for (var i = 0, len = audios.length; i < len; i++) {
                    if (audios[i] != e.target) {
                        audios[i].pause();
                    }
                }
            }, true);
        })


        String.format = function (src) {
            if (arguments.length == 0) return null;
            var args = Array.prototype.slice.call(arguments, 1);
            return src.replace(/\{(\d+)\}/g, function (m, i) {
                return args[i];
            });
        };

        function getdiv(item) {
            var s = ' <br/><br/><br/> <div class="row" > <div class="col-xs-6 col-md-4">' +
                    '<span>' +
                    '{0}' +
                    '<a href="{1}"' +
                    'target="_blank">下载地址</a>' +
                    '</span>' +
                    '</div>' +
                    '<div class="col-xs-6 col-md-4">' +
                    '<img src="{2}" width="100"' +
                    'height="100"/>' +

                    '</div>' +
                    '<div class="col-xs-6 col-md-4">' +
                    '<audio src="{1}" controls="controls">' +

                    '</audio>' +
                    '</div></div>';
            var str = String.format(s, item.userName + '-' + item.albumName + '-' + item.songName, item.songUrl, item.albumPic)
            return str;
        }


        function getdata() {
            var url = "{% url "getapis:getMusic" "gg" %}";

            var musicname = $("#musicname").val();
            if (musicname.length == 0) {
                musicname = "阴天快乐";
            }

            url = url.replace("gg", musicname);

            $.getJSON(url, function (result) {

                var res = result.data.data.list;
                $("#musiclist").html('');

                $.each(res, function (i, item) {
                    console.log(item);
                    var divstr = getdiv(item);
                    $("#musiclist").append(divstr);
                    //container
                    //$("#container").append(divstr);
                });
            });

        }
        $(function () {
            getdata();

        });

    </script>




{% endblock %}